<template>
	<el-table :data="data" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" border stripe style="width: 100%">
		<!-- FieldItem?.options就是显示在表格内的字段 -->
		<el-table-column v-for="option in FieldItem?.options" :key="option.value" :label="option.label" :prop="option.value">
			<template #default="scope">
				<template v-if="option.type === 0">
					<el-image
						v-if="isImg(getCalcsVal(option.value, scope.row))"
						:src="getImg(getCalcsVal(option.value, scope.row))"
						style="width: 200px;height: ;200px"
						fit="contain"
						lazy
					/>
					<!-- 表达式格式的数据，需要进行处理 -->
					<span v-else>{{ getCalcsVal(option.value, scope.row) }}</span>
				</template>
				<el-link
					v-else-if="option.type === 1"
					type="primary"
					@click="emits('handleEmitEvent', 'handleTableClick', option, scope.$index)"
					:underline="false"
					>{{ option.value }}</el-link
				>
				<template v-else-if="option.type === 2">
					<el-image
						v-if="isImg(scope.row[option.value])"
						:src="getImg(scope.row[option.value])"
						style="width: 200px;height: ;200px"
						fit="contain"
						lazy
					/>
					<span v-else>{{ scope.row[option.value] }}</span>
				</template>
			</template>
		</el-table-column>
	</el-table>
</template>

<script setup lang="ts">
import { TabFieldType } from '/@/components/Linxyun/custom/DataStructs/commontype';
import { calcFieldValue } from '/@/components/Linxyun/custom/CustomCommon/lxy_expression.js';
const props = withDefaults(
	defineProps<{
		modelValue: any[];
		FieldItem: TabFieldType | null;
		pageData?: Record<string, any>;
		inputData?: Record<string, any>;
		globalData?: Record<string, any>;
	}>(),
	{
		FieldItem: null,
	}
);

const { modelValue, FieldItem } = toRefs(props);
const data = ref<any[]>([]);
const emits = defineEmits(['handleEmitEvent']);

/**
 * @description: 得到计算后的值，需要调用改函数的是'$label.xx{xx}','$time'这些特殊的表达式
 * @param {*} key 当前字段的变量名例如CName
 * @param {*} obj 当前行的信息
 */
const getCalcsVal = (key: any, obj: Record<string, any>) => {
	console.log('输入的是', key, obj);

	// 如果传入的不是空对象
	if (JSON.stringify(obj) !== '{}') {
		// 计算字段的值
		return calcFieldValue(4, key, props.inputData, { ...props.pageData, ...obj }, props.globalData);
	}
};
if (Array.isArray(modelValue.value)) {
	data.value = modelValue.value;
}
watch(
	() => props.modelValue,
	(val) => {
		if (Array.isArray(val)) {
			data.value = modelValue.value;
		} else {
			data.value = [];
		}
	}
);
// 是否是图片
const isImg = (val: string) => {
	if (val && val.includes('http:') && /[.png,.jpg]$/.test(val)) {
		return true;
	} else {
		return false;
	}
};
// 将图片xxx:=xxx.png =>xxx.png
const getImg = (url: string) => {
	if (url.includes(':=')) {
		return url.split(':=')[1];
	} else {
		return url;
	}
};
</script>

<style lang="scss" scoped></style>
